/* 
  首页业务
  1.页面一加载，axios获取数据
    页面DOM+外部资源
  2.把统计数据渲染到图表

*/

// 1.页面一加载，axios获取数据
window.addEventListener('load',async function() {
  const {data} = await axios.get('/dashboard')
  // console.log(data);
  setOverview(data.data.overview)//概览
  setLine(data.data.year)//平均薪资
  setPie(data.data.salaryData)//薪资分布
  setBar(data.data.groupData)//柱状图
  setGender(data.data.salaryData)//男女分布
  setMap(data.data.provinceData)//男女分布
})

// 点击退出，清除token退出到登陆页
document.querySelector('#logout').addEventListener('click',function(e) {
  e.preventDefault()
  location.href = './login.html'
  // console.log('1234');
  localStorage.setItem('token', '')
  Toast.success('退出成功')
})

// 2.把统计数据渲染到图表
// 2.1 数据概览
const setOverview = data => {
  // console.log(data);//{salary: 16614, student_count: 80, age: 24, group_count: 8}
  // console.log(Object.keys(data));//['salary', 'student_count', 'age', 'group_count']
  Object.keys(data).forEach(item => {
    // console.log(item);//['salary', 'student_count', 'age', 'group_count']
    // console.log(data[item]);//16614 80  24  8
    document.querySelector(`[name="${item}"]`).innerHTML = data[item] 
  })
}

// 2.2 折线图: 月份平均薪资
const setLine = data => {
  // console.log(data);
  const xData = data.map(item => item.month)
  // console.log(xData);// ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

  const yData = data.map(item => item.salary)
  // console.log(yData);// [24200, 22800, 23900, 23600, 13000, 23900, 22900, 13700, 12900, 15500, 11100, 21300]

 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.querySelector('#line'));

 // 指定图表的配置项和数据
 const option = {
   // 1.鼠标移入提示框
   tooltip: {
     trigger: 'axis',
     position: function (pt) {
       return [pt[0], '10%'];
     }
   },

   // 2.图表标题
   title: {
     left: 'left',
     text: '2021全学科薪资走势'
   },

   // 4.x轴（必须）
   xAxis: {
     type: 'category',
     // 折线图左右两边的间距留白
     boundaryGap: true,
     data: xData
   },

   // 5.y轴（必须）
   yAxis: {
     type: 'value',
     min: 0,
     max: 25000,
     boundaryGap: [0, '100%'],
     splitLine: {
       lineStyle: {
         type: 'dashed',
         width: 2,
         color: '#ccc'
       }
     },
   },

   // 7.图标的内容
   series: [
     {
       name: '薪资',
       type: 'line',
       // 折线图的小圆点
       symbol: 'emptyCircle',
       // 小圆点大小
       symbolSize: 8,
       // 解决数据过多圈圈拥挤的问题
       sampling: 'lttb',
       // 线条颜色样式
       itemStyle: {
         color: '#0c94ea',
       },
       lineStyle: {
         // 控制线条宽度粗细
         width: 5,
       },
       // 折线区域
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
             color: '#7eb9f1'
           },
           {
             offset: 0.7,
             color: '#fff'
           },
           {
             offset: 1,
             color: '#fff'
           }
         ])
       },
       data: yData,
       smooth: true
     }
   ],
 };

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
}

// 2.3 饼图: 薪资分布
const setPie = data => {
  // console.log(data);
  data = data.map(item => {
    return {
      value:item.g_count + item.b_count,
      name: item.label
    }
  })
// console.log(data);
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.querySelector('#salary'));

   // 指定图表的配置项和数据
   const option = {
     title: {
       text: '班级薪资分布',
       top: '20',
       left: '20',
       textStyle: {
         fontSize: 20,
       }
     },
     legend: {
       bottom: '30',
       left: 'center',
       // 图例图标宽度
       itemWidth: 20,
       itemHeight: 20,
       // 文本样式
       textStyle: {
         fontSize: 10
       },
       // 图例之间的间隔
       itemGap: 29,
     },
     series: [
       {
         name: 'Access From',
         type: 'pie',
         top:-80,
         // 饼图内外直径
         radius: ['35%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
           // 饼图圆角
           borderRadius: 10,
           borderColor: '#fff',
           borderWidth: 2
         },
         label: {
           show: false,
           position: 'center'
         },
         emphasis: {
           label: {
             show: true,
             fontSize: 40,
             fontWeight: 'bold'
           }
         },
         labelLine: {
           show: false
         },
         data: data
       }
     ],
     color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
     
   };

   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
}

// 2.4 柱状图: 班级每组薪资
const setBar = data => {
  // console.log(data);
  // console.log(data["1"]);
  const nameArr = data[1].map(item => item.name)
  const hope_salaryArr = data[1].map(item => item.hope_salary)
  const salaryArr = data[1].map(item => item.salary)
  // console.log(nameArr,hope_salaryArr, salaryArr);

   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.querySelector('#lines'));

   // 指定图表的配置项和数据
   const option = {
     // 主标题
     title: {
       text: '班级每组薪资'
     },

     // 鼠标移入提示信息
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       }
     },

     // 图例图标
     // legend: {},

     // 图标距离周围的外边距
     grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
     },

     // x轴
     xAxis: [
       {
         type: 'category',
         data: nameArr
       }
     ],

     // y轴
     yAxis: {
       max: 25000,
       min: 0
     },

     // 图标内容
     series: [
       {
         // name: 'Video Ads',
         type: 'bar',
         // stack: 'Ad',
         // emphasis: {
         //   focus: 'series'
         // },
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#3ad59d' },
             { offset: 1, color: '#d3f6e9' },
           ])
         },
         data:hope_salaryArr
       },
       {
         // name: 'Search Engine',
         type: 'bar',
         data: salaryArr,
         // emphasis: {
         //   focus: 'series'
         // },
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#4ba1ef' },
             { offset: 1, color: '#d9ebfb' },
           ])
         },
       },
     ]
   };

   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);

  //  点击小组按钮，注册委托事件
   document.querySelector('#btns').addEventListener('click', function(e) {
    // console.log(111);
    // console.log(e.target);
    if(e.target.tagName === 'BUTTON'){
      // 排他
      document.querySelector('.btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      // 获取小组变化，根据点击的编号生成图表
      // console.log(e.target.innerHTML);
      const nameArr = data[e.target.innerHTML].map(item => item.name)
      const hope_salaryArr = data[e.target.innerHTML].map(item => item.hope_salary)
      const salaryArr = data[e.target.innerHTML].map(item => item.salary)
      // console.log(option);
      // console.log(option.xAxis[0].data);

      option.xAxis[0].data = nameArr
      option.series[0].data = hope_salaryArr
      option.series[0].data = salaryArr
      
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  })
}

// 2.5 饼图: 男女薪资分布
const setGender = data => {
  // console.log(data);
  const a = data.map(item => item)
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector('#gender'));

      // 指定图表的配置项和数据
      const option = {
    title: [
        {
        text: '男女薪资分布',
        left: 'left',
        top:10,
        left:10,
        textStyle: {
          fontSize: 20
        }
      },
      {
        text: '男生',
        top: '45%',
        left: 'center'
      },
      {
        text: '女生',
        top: '90%',
        left: 'center'
      },
    ],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['15%', '20%'],
        left: 'center',
        top:  -190,
        width: 800,
        data: [
          { value: 230, name: '1万以下' },
          { value: 910, name: '1-1.5万' },
          {value: 600, name: '11.5-2万' },
          { value: 800, name: '2万以上' },
        ]
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['35%', '47%'],
        left: 'center',
        top:  200,
        width: 800,
        data: [
          { value: 230, name: '1万以下' },
          { value: 910, name: '1-1.5万' },
          {value: 600, name: '11.5-2万' },
          { value: 800, name: '2万以上' },
        ]
      },
    ],
    color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
  };
  
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
}

// 2.6 地图: 省数据
const setMap = data => {
  // console.log(data);
          // 3.1 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.querySelector('#map'));

          // 3.2 指定图表的配置项和数据
          const dataList = data
  
          // 数据设置
          dataList.forEach((item) => {
              // 数据里名字和上面的名字有点不太一样, 需要把多余的文字去掉(替换成空字符串)
              item.name = item.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') 
          })
  
          let option = {
              title: {
                  text: '籍贯分布',
                  top: 10,
                  left: 10,
                  textStyle: {
                      fontSize: 16,
                  },
              },
              tooltip: {
                  trigger: 'item',
                  formatter: '{b}: {c} 位学员',
                  borderColor: 'transparent',
                  backgroundColor: 'rgba(0,0,0,0.5)',
                  textStyle: {
                      color: '#fff',
                  },
              },
              visualMap: {
                  min: 0,
                  max: 6,
                  left: 'left',
                  bottom: '20',
                  text: ['6', '0'],
                  inRange: {
                      color: ['#ffffff', '#0075F0'],
                  },
                  show: true,
                  left: 40,
              },
              geo: { // 地理坐标系组件
                  map: 'china',
                  roam: false,
                  zoom: 1.0,
                  label: {
                      normal: {
                          show: true,
                          fontSize: '10',
                          color: 'rgba(0,0,0,0.7)',
                      },
                  },
                  itemStyle: {
                      normal: {
                          borderColor: 'rgba(0, 0, 0, 0.2)',
                          color: '#e0ffff',
                      },
                      emphasis: {
                          areaColor: '#34D39A',
                          shadowOffsetX: 0,
                          shadowOffsetY: 0,
                          shadowBlur: 20,
                          borderWidth: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)',
                      },
                  },
              },
              series: [
                  {
                      name: '籍贯分布',
                      type: 'map',
                      geoIndex: 0,
                      data: dataList,
                  },
              ],
          }
  
          // 3.3使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
}
